import MyForm from '@/components/MyForm';
import MyPageContainer from '@/components/MyPageContainer';
import MyScrollTable from '@/components/MyScrollTable';
import MyUserSelect from '@/components/MyUserSelect';
import useAuth from '@/hooks/useAuth';
import useDefaultColumn from '@/hooks/useDefaultColumn';
import usePageVariable from '@/hooks/usePageVariable';
import { AUTH_TYPE, MENU_CODES } from '@/options';
import { addItem, delItem, detailItem, getList, updateItem } from '@/services/micro/comment';
import { getOptionBtn } from '@/util/table';
import { getDefaultSelectListProps, getSelectList } from '@/util/util';
import { ProFormRadio, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import React from 'react';

type DataType = COMMENT_TYPE.Info;
const TableList: React.FC = () => {
  const { insertAuth, detailAuth, delAuth } = useAuth(MENU_CODES.COMMENT);
  const defaultColumn = useDefaultColumn();
  const {
    formModel,
    setFormModel,
    formType,
    actionRef,
    formRef,
    currentRow,
    finishMsg,
    columns,
    changeForm,
    getFormTitle,
    delMsgOpen,
    setDelMsgOpen,
  } = usePageVariable<DataType>([
    defaultColumn.index,
    {
      ...defaultColumn.directorId,
      title: '用户',
      dataIndex: 'userId',
    },
    defaultColumn.createTime,
    defaultColumn.updateTime,
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => [
        detailAuth && getOptionBtn(AUTH_TYPE.DETAIL, () => changeForm(record, '2')),
        delAuth && getOptionBtn(AUTH_TYPE.DELETE, () => changeForm(record, '3')),
      ],
    },
  ]);
  const delCall = () => {
    finishMsg(async () => {
      const ret = await delItem(currentRow!.id);
      setDelMsgOpen(false);
      if (ret.success) actionRef.current?.reload();
    });
  };

  const onFinish = async (value: DataType) => {
    if (formType === '2') {
      setFormModel(false);
      return;
    }
    await finishMsg(async () => {
      await (formType === '1'
        ? updateItem({
            ...value,
            id: currentRow!.id,
          })
        : addItem(value));
      setFormModel(false);
      actionRef.current?.reload();
      formRef.current?.resetFields();
    });
  };
  const getFieldProps = (len: number) => {
    if (formType === '2') return undefined;
    return {
      maxLength: len,
      showCount: true,
    };
  };
  return (
    <MyPageContainer modelOk={delCall} delMsgOpen={delMsgOpen} modelCancel={setDelMsgOpen}>
      <MyScrollTable<DataType, PageParams>
        actionRef={actionRef}
        request={getList}
        columns={columns}
        clickAdd={changeForm}
        isAdd={insertAuth}
      />
      <MyForm
        formRef={formRef}
        title={getFormTitle()}
        open={formModel}
        request={currentRow?.id ? () => detailItem(currentRow!.id) : undefined}
        onOpenChange={setFormModel}
        onFinish={onFinish}
        readonly={formType === '2'}
      >
        <ProFormText
          label="名称"
          name="title"
          fieldProps={getFieldProps(30)}
          rules={[
            {
              required: true,
              message: '名称为必填项',
            },
          ]}
        />
        <MyUserSelect name="userId" label="用户" tooltip="发表评论的用户" />
        <MyUserSelect name="answerId" label="回复用户" tooltip="该评论回复的用户" />
        <ProFormText label="点赞数" name="likeNum" />
        <ProFormRadio.Group
          label="状态"
          name="status"
          request={() => getSelectList(getDefaultSelectListProps('commentType'))}
        />
        <ProFormTextArea label="评论" name="content" fieldProps={getFieldProps(240)} />
      </MyForm>
    </MyPageContainer>
  );
};

export default TableList;
